<template>
    <view>
        <view class="dis_f_c_c" style="height: 100vh;" v-if="isLoading">
            <u-loadmore status="loading" />
        </view>
        <view v-else>
            <view style="position: relative">
                <u-image :src="bgImg" width="100vw" height="100vh" ></u-image>
            </view>
            <view class="zpyp" @click="handleToClass(0)"></view>
            <view class="lwsc" @click="handleToClass(1)"></view>
            <view class="znfw" @click="handleToClass(2)"></view>
            <view class="bjkh" @click="handleToClass(3)"></view>
            <view class="bjhy" @click="handleToClass(4)"></view>
            <view class="esh" @click="handleToClass(5)"></view>
            <view class="zlfw" @click="handleToClass(6)"></view>
            <view class="qcfw" @click="handleToClass(7)"></view>
            <view class="kyhl" @click="handleToClass(8)"></view>
            <view class="zxfw" @click="handleToClass(9)"></view>
            <view class="dbfw" @click="handleToClass(10)"></view>
            <view class="dzh_active" @click="handleShow"></view>
            <view class="dzh">
                <u-transition :show="show" mode="slide-up">
                    <u-image :src="hellowImg" width="200rpx" height="200rpx" mode="widthFix" ></u-image>
                </u-transition>
            </view>
        </view>
    </view>
</template>

<script>
import {getByKeyApi} from "@/sheep/api";
import { bindAgentId } from "@/sheep/utils/common";
import { mapMutations } from "vuex";
export default {
    data() {
        return{
            isLoading: false,
            show: false,
            bgImg:'',
            hellowImg:''
        };
    },

    async onLoad(options) {
        if (options.scene) {
            //绑定邀请人id
            this.setBindAgentId(options.scene);
            bindAgentId();
        }
        this.getBg()
    },
    onReady() {},
    onShow(options) {
    },
    methods: {
        ...mapMutations({
            setBindAgentId: "user/setBindAgentId",
        }),
        async getBg() {
            this.isLoading = true
            let res = await getByKeyApi("bg_img");
            this.isLoading = false
            this.bgImg = res.data[1].url
            this.hellowImg = res.data[0].url
        },
        handleToClass(index){
            const app = getApp();
            app.globalData.curType = index;
            uni.switchTab({
                url: "/pages/classList/index",
            });
        },
        handleShow(){
            if (!this.show){
                this.show = true
                setTimeout(()=>{
                    this.show = false
                },5000)
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.dbfw{
    position: absolute;
    z-index: 9;
    top: 263rpx;
    left: 0;
    width: 130rpx;
    height: 151rpx;
}
.esh{
    position: absolute;
    z-index: 9;
    top: 173rpx;
    left: 152rpx;
    width: 130rpx;
    height: 151rpx;
}
.bjhy{
    position: absolute;
    z-index: 9;
    top: 85rpx;
    left: 308rpx;
    width: 130rpx;
    height: 151rpx;
}
.zlfw{
    position: absolute;
    z-index: 9;
    top: 243rpx;
    right: 148rpx;
    width: 130rpx;
    height: 157rpx;
}
.znfw{
    position: absolute;
    z-index: 9;
    top: 334rpx;
    right: 0rpx;
    width: 130rpx;
    height: 157rpx;
}
.zpyp{
    position: absolute;
    top: 450rpx;
    left: 177rpx;
    width: 234rpx;
    height: 157rpx;
    transform: rotate(-25deg);
}
.kyhl{
    position: absolute;
    z-index: 9;
    top: 539rpx;
    left: 0;
    width: 159rpx;
    height: 129rpx;
}
.qcfw{
    position: absolute;
    z-index: 9;
    top: 693rpx;
    left: 106rpx;
    width: 159rpx;
    height: 129rpx;
}
.lwsc{
    position: absolute;
    z-index: 9;
    bottom: 460rpx;
    left: 325rpx;
    width: 159rpx;
    height: 110rpx;
    transform: rotate(25deg);
}
.zxfw{
    position: absolute;
    z-index: 9;
    bottom: 335rpx;
    right: 149rpx;
    width: 154rpx;
    height: 156rpx;
    border-top-left-radius: 91rpx;
    border-bottom-right-radius: 68rpx;
    transform: rotate(-9deg);
}
.bjkh{
    position: absolute;
    z-index: 9;
    bottom: 420rpx;
    right: 10rpx;
    width: 141rpx;
    height: 174rpx;
    border-top-left-radius: 91rpx;
    border-bottom-right-radius: 68rpx;
    transform: rotate(-9deg);
}
.dzh_active{
    position: absolute;
    z-index: 9;
    bottom: 147rpx;
    left: 79rpx;
    width: 264rpx;
    height: 253rpx;
}
.dzh{
    position: absolute;
    z-index: 9;
    bottom: 300rpx;
    left: 162rpx;
}
</style>
